<template>
	<view class="fu">
		<view class="goods">
			<view class="goodsson" v-for="item in goodsArr" :key="item.id" @click="nav(item.id)">
				<image :src="item.img_url" mode=""></image>
				<view class="price">
					<view>¥{{item.sell_price}}</view>
					<view>¥{{item.market_price}}</view>
				</view>
				<view class="title">{{item.title}}</view>
			</view>
		</view>
		<view class="bottom" v-if="goodsArr.length>=15">
			已经到底了.........
		</view>
	</view>
</template>

<script>
	export default {
		props:['goodsArr'],
		data() {
			return {

			}
		},
		methods: {
			nav(id){
				this.$emit('nav',id)
			}
		}
	}
</script>

<style>
	.bottom{
		margin-top: 20rpx;
		text-align: center;
	}
	.goods {
		display: flex;
		flex-wrap: wrap;
		border-top: 7px solid #ECECEC;
		border-left: 7px solid #ECECEC;
		box-sizing: border-box;
	}

	.goodsson {
		width: 50%;
		border-bottom: 7px solid #ECECEC;
		border-right: 7px solid #ECECEC;
		box-sizing: border-box;
		height: 500rpx;
	}

	.goodsson>image {
		height: 60%;
		width: 80%;
	}

	.price {
		margin-left: 10rpx;
		display: flex;
		align-items: flex-end;
	}

	.price :nth-child(1) {
		color: red;
		font-size: 20px;
		margin-right: 20rpx;
	}

	.price :nth-child(2) {
		color: #8F8F94;
		text-decoration: line-through;
	}

	.title {
		margin: 10rpx;
	}
</style>
